<template>
  <transition appear name="side_anime">
    <div>
      <div class="back">
      <el-button type="success" size="mini" @click="back">返回</el-button>
    </div>

    <el-descriptions title="病人基本信息" v-model="userDetail">
      <el-descriptions-item label="姓名：" v-model="userDetail.name">{{userDetail.name}}</el-descriptions-item>
      <el-descriptions-item label="性别：" v-model="userDetail.sex">{{userDetail.sex}}</el-descriptions-item>
      <el-descriptions-item label="出生年月：" v-model="userDetail.birth">{{userDetail.birth}}</el-descriptions-item>
      <el-descriptions-item label="年龄：" v-model="userDetail.age">{{userDetail.age}}</el-descriptions-item>
      <el-descriptions-item label="血型：" v-model="userDetail.bloodtype">{{userDetail.bloodtype}}</el-descriptions-item>
      <el-descriptions-item label="身份证：" v-model="userDetail.idno">{{userDetail.idno}}</el-descriptions-item>
      <el-descriptions-item label="电话：" v-model="userDetail.tel">{{userDetail.tel}}</el-descriptions-item>
      <el-descriptions-item label="住址：" v-model="userDetail.address">{{userDetail.address}}</el-descriptions-item>
      <el-descriptions-item label="民族：" v-model="userDetail.nation">{{userDetail.nation}}</el-descriptions-item>
      <el-descriptions-item label="国籍：" v-model="userDetail.country">{{userDetail.country}}</el-descriptions-item>
    </el-descriptions>

    <div class="addDiag">
      <el-button
        size="mini"
        icon="el-icon-plus"
        type="primary"
        @click="handleAdd()">添加诊断信息
      </el-button>
    </div>

    <h4>历史诊断记录</h4>

    <div>
      <div class="totalRecord">
        <el-button icon="el-icon-view" type="success" size="mini" @click="getTotalRecord">查看所有记录</el-button>
      </div>

    <!-- 添加诊断信息 -->
    <el-dialog
        title="诊断信息"
        v-model="addDiagnoseVisible"
        width="50%">
        <el-form ref="addDiagnoseForm" :model="addDiagnoseForm" label-width="80px" :rules="rules">
          <el-form-item prop="description" label="诊断信息">
            <el-input type="textarea" :rows="2" v-model="addDiagnoseForm.description" clearable></el-input>
          </el-form-item>
        </el-form>
        <span class="dialog-footer">
          <el-button @click="addDiagnoseVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitDiag('addDiagnoseForm')">前往开药</el-button>
        </span>
    </el-dialog>

    <!-- 历史诊断记录 -->
    <el-table 
        ref="multipleTable"
        :data="userHistoryList" 
        tooltip-effect="dark"
        style="width: 100%" 
        title="历史诊断记录" >
        <el-table-column label="时间" width="180">
          <template #default="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column
          prop="doctor"
          label="医生"
          width="120">
        </el-table-column>
        <el-table-column
          prop="description"
          label="诊断描述"
          width="180">
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
      v-model:currentPage="currentPage"  
      :page-size="8"
      hide-on-single-page
      layout="total, prev, pager, next"
      :total=total>
    </el-pagination>
    </div>

    </div>
  </transition>
</template>

<script>
import {getUserTotalRecord, startDiagnose} from '../../api/api'
import {submitDiagnose} from '../../api/api'
import { defineComponent, ref } from 'vue'

export default defineComponent({
  data() {
    return {
      userDetail:{},
      userHistoryList:[],
      addDiagnoseVisible:false,
      addDiagnoseForm:{},  //添加诊断信息
      rules:{
        description:{ required:true, message:'不能为空', trigger: 'blur'}
      },
      currentPage:1,
      total:0
    }

  },

  setup() {
    return {
      textarea: ref(''),
    }
  },

  mounted(){
    this.getPatientInfo();
  },

  methods: {
    back() {
      this.$router.push("/homeview/patientList")
    },

    //当每页数据条数发生改变的时候触发
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.getPatientList();
    },
    //当页码发生改变的时候触发
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getPatientList(val);
    },

    //病人信息
    getPatientInfo() {
      let token = this.$store.state.medicalStaff.loginData.tokenValue;
      let patientId = this.$route.params.id;
      let data = {
        'id':patientId
      }
      let header = {
        'satoken':token
      }
      startDiagnose(data,header).then(response => {
        console.log("请求成功",response)
        if (response.ret == '0'){
          this.userDetail.name = response.userDetail.name
          this.userDetail.sex = response.userDetail.sex
          this.userDetail.birth = response.userDetail.birth
          this.userDetail.age = response.userDetail.age
          this.userDetail.bloodtype = response.userDetail.bloodtype
          this.userDetail.idno = response.userDetail.idno
          this.userDetail.tel = response.userDetail.tel
          this.userDetail.address = response.userDetail.address
          this.userDetail.nation = response.userDetail.nation
          this.userDetail.country = response.userDetail.country
          this.userHistoryList = response.userHistory
        }else{
          this.$message({
              message:'查看失败',
              type: 'error',
              showClose:true
          })
        }
      })
    },

    //获取所有诊断记录
    getTotalRecord() {
      let token = this.$store.state.medicalStaff.loginData.tokenValue;
      let patientId = this.$route.params.id;
      let data = {
        'userId':Number(patientId),
        'page':this.currentPage,
        'size':8
      }
      let header = {
        'satoken':token
      }
      console.log(data)
      console.log(token)
      getUserTotalRecord(data,header).then(response => {
        console.log('请求成功',response)
        if (response.ret === 0){
          this.userHistoryList = response.list
          this.total = response.count
          this.$message({
              message:'获取诊断记录成功',
              type: 'success',
              showClose:true
          })
        }else{
          this.$message({
              message:'获取诊断记录失败',
              type: 'error',
              showClose:true
          })
        }
      })
    },

    //添加诊断信息
    handleAdd() {
      this.addDiagnoseVisible = true
    },
    submitDiag(formName) {
      let token = this.$store.state.medicalStaff.loginData.tokenValue;
      let patientId = this.$route.params.id;
      let data = {
        userId:patientId,
        description:this.addDiagnoseForm.description
      }
      let header = {
        'satoken':token
      }
      //开启校验
      this.$refs[formName].validate((valid) => {
        if(valid) {
          submitDiagnose(data,header).then(response => {
            console.log('请求成功',response)
            console.log(data)
            if (response.ret == '0'){
              this.addDiagnoseVisible=false
              this.$message({
                message:'添加成功',
                type: 'success',
                showClose:true
              })
              this.$router.push({
              "name":"drugList",
              "params":{
                "id":patientId
              }
            })
            }else{
              this.$message({
                message:'添加失败',
                type: 'error',
                showClose:true
              })
            }
          })
        }else {
          return false;
        }
      })
      
    }
  }
})
</script>

<style scoped>
.side_anime-enter-from,.side_anime-leave-to{
  opacity: 1;
}

.side_anime-enter-active{
  animation: slideInLeft 1s;
}

.side_anime-leave-active{
  animation: slideOutLeft 1s;
}
.back {
  text-align: left;
  margin-bottom: 30px;
}
.addDiag {
  text-align: left;
  margin: 20px 0 20px 0
}
.totalRecord {
  text-align: left;
  margin: 20px 0 20px 0
}
</style>
